//fd265d
import React, {Component} from 'react';
import {Image,TouchableOpacity,StyleSheet,View} from 'react-native';
import {scaleSize} from '../../utils/screen';
import FontText from './FontText';
import {i18n} from '../../i18n/index';

export default class TableItem extends Component {
    render() {
        let {isActive,price,time,guest,tableNum} = this.props;
        let tableStyle = {borderColor: "#fff"}
        if(isActive){
            tableStyle = {borderColor:"#fd265d",backgroundColor: "rgba(253,38,93,0.3)"}
        }
        return (
            <TouchableOpacity 
                activeOpacity = {0.8}
                onPress = {()=>this.onPress()}
                style = {styles.box}>
                <View style = {[styles.table,tableStyle]}>
                    <FontText font={'light'} style = {[styles.tableNum,{color:isActive?"#fd265d":"#fff"}]}>
                        {tableNum}
                    </FontText>
                </View>
                <View style = {styles.textBox}>
                    <FontText style = {styles.text} font={'medium'}>{i18n.t("store.table.tabopen")}:{price}</FontText>
                    <FontText style = {styles.text} font={'medium'}>{i18n.t("store.table.timein")}:{time}</FontText>
                    <FontText style = {styles.text} font={'medium'}>{i18n.t("store.table.guest")}:{guest}</FontText>
                </View>
            </TouchableOpacity>
        );
    }
    onPress(){
        let {onPress} = this.props;
        onPress && onPress();
    }
}

const styles = StyleSheet.create({
    box:{
        height:scaleSize(400),
        width:scaleSize(270)
    },
    table:{
        height:scaleSize(270),
        width:scaleSize(270),
        borderWidth: 2,
        justifyContent: 'center',
        alignItems: 'center',
    },
    tableNum:{
        fontSize: scaleSize(70),
        color:"#fff"
    },
    text:{
        fontSize: scaleSize(26),
        color:"#9b9b9b",
        fontWeight: '400',
    },
    menuIcon:{
        paddingHorizontal:scaleSize(18),
    },
    icon:{
        width:scaleSize(31),
        height:scaleSize(31)
    },
    textBox:{
        flex:1,
        paddingVertical: 2,
        justifyContent: 'center',
    }
})